<template>
  <view class="mine">
    <view class="mine_info">
      <image
        class="mine_info_avatar"
        :src="userInfo.headImgUrl || defaultAvatar"
        mode="aspectFit"
      />
      <view v-if="userInfo.name">
        <view class="mine_info_username">{{ userInfo.name || '请登录' }}</view>
        <view class="mine_info_role">商铺管理员</view>
      </view>
      <view v-else class="mine_info_username" @click="handleLogin">请登录</view>
    </view>
    <view class="mine_data">
      <view class="mine_data_ad" v-if="bannerData?.url">
        <image :src="bannerData.url" mode="aspectFit" />
      </view>
      <view class="mine_data_show">
        <view class="title">数据展示</view>
        <view class="type_list">
          <view class="type_list_item" :key="item">
            <image
              src="@/static/images/income.png"
              mode="aspectFit"
              class="w_160 h_160 mb_20"
            />
            <view
              ><text class="fs_28">已收入</text
              ><text class="fs_46 ml_10" style="color: rgb(254, 206, 49)"
                >2000.00</text
              ></view
            >
          </view>
          <view class="type_list_item" :key="item">
            <image
              src="@/static/images/waitIncome.png"
              mode="aspectFit"
              class="w_160 h_160 mb_20"
            />
            <view
              ><text class="fs_28">待收入</text
              ><text class="fs_46 ml_10" style="color: rgb(231, 65, 66)"
                >2000.00</text
              ></view
            >
          </view>
        </view>
      </view>
    </view>
    <view class="mine_menu">
      <view class="mine_menu_list">
        <view
          v-for="item in menuList"
          :key="item"
          class="mine_menu_list_item"
          @click="handleLink(item.type)"
        >
          <view class="flex_center">
            <image :src="item.icon" mode="aspectFit" class="w_46 h_46 mr_20" />
            <text class="fs_32">{{ item.name }}</text>
          </view>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import useStore from '@/stores/userStore.js'
const { token, userInfo } = storeToRefs(useStore())
const { getUserInfo } = useStore()
import { apiLogin } from '../../../apis/login'
import defaultAvatar from '@/static/images/common/default_avatar.png'

import settingIcon from '@/static/images/setting.png'
import agreementIcon from '@/static/images/agreement.png'
import instructionsIcon from '@/static/images/instructions.png'
import suggestionIcon from '@/static/images/suggestion.png'
import aboutIcon from '@/static/images/about.png'
import { appId } from '../../../common/config'

const menuList = [
  {
    name: '账户设置',
    icon: settingIcon,
    type: 'setting',
  },
  {
    name: '用户协议',
    icon: agreementIcon,
    type: 'agreement',
  },
  {
    name: '用户须知',
    icon: agreementIcon,
    type: 'agreement',
  },
  {
    name: '关于我们',
    icon: aboutIcon,
    type: 'about',
  },
  {
    name: '投诉建议',
    icon: suggestionIcon,
    type: 'suggestion',
  },
]

const handleLogin = () => {
  uni.login({
    provider: 'weixin', //使用微信登录
    success: async (loginRes) => {
      const resData = await apiLogin({
        jsCode: loginRes.code,
        appId,
      })
      token.value = resData.accessToken
      getUserInfo()
    },
    fail(err) {
      console.log(err)
    },
  })
}
const bannerData = ref({})
const getBannerList = () => {
  uni
    .request({
      url: '/light-basic/wxBannerController/list',
      data: { bannerFlag: 'mineBanner' },
      method: 'GET',
      resField: 'data',
    })
    .then((res) => {
      if (res.length > 0) {
        bannerData.value = res[0]
      }
    })
}
getBannerList()

const handleLink = (type) => {
  if (type === 'setting') {
    uni.navigateTo({
      url: '/pages/tabbar/mine/account-setting',
    })
  } else {
    uni.navigateTo({
      url: '/pages/tabbar/mine/html-preview?type=' + type,
    })
  }
}
</script>

<style lang="scss" scoped>
.mine {
  width: 100%;
  &_info {
    display: flex;
    align-items: center;
    padding: 20rpx;
    padding-top: 80rpx;
    height: 20vh;
    background: radial-gradient(at left top, #e7edff, #81a9f0);
    &_avatar {
      margin-right: 20rpx;
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
      border: 1px solid ghostwhite;
    }
    &_username {
      font-weight: bold;
      font-size: 30rpx;
    }
    &_role {
      display: inline-block;
      margin-top: 10rpx;
      padding: 6rpx;
      border-radius: 10rpx;
      font-size: 24rpx;
      background: #81a9f0;
      color: #fff;
    }
  }
  &_data {
    padding: 20rpx;
    margin-top: 20rpx;
    background-color: #fff;
    &_ad {
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 270rpx;
      overflow: hidden;
      border-radius: 40rpx;
      background: #e7edff;
      image {
        width: 100%;
        height: 100%;
      }
    }
    &_show {
      margin-top: 40rpx;
      .title {
        font-size: 40rpx;
        font-weight: bold;
      }
      .type_list {
        margin-top: 10rpx;
        display: flex;
        justify-content: space-around;
        &_item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 300rpx;
          font-size: 24rpx;
          padding: 10rpx;
        }
      }
    }
  }
  &_menu {
    margin-top: 20rpx;
    background-color: #fff;
    &_list {
      &_item {
        display: flex;
        justify-content: space-between;
        padding: 30rpx 20rpx;
        border-bottom: 1px solid ghostwhite;
        font-size: 28rpx;
        color: $uni-text-color;
      }
    }
  }
}
</style>
